
import { List } from 'antd-mobile';
import React from 'react';
import { lazy } from 'router';
import { decorator } from 'grey-react-box';
import { Switch, Route, RouteChildrenProps, withRouter } from 'react-router-dom';
import style from './style.module.scss';
import history from 'router/history'

const MyQRCode = lazy(() => import('page/MyQRCode'));
const Address = lazy(() => import('page/Address'));
const PurchaseHistory = lazy(() => import('page/PurchaseHistory'));
const Order = lazy(() => import('page/Order'));

const Item = List.Item;

export default decorator<any, RouteChildrenProps>(withRouter)(props => {

    const { pathname } = props.location

    return (
        <>
            <div className={style.body} >
                <List renderHeader={() => '个人中心'} className="my-list">
                    <Item arrow="horizontal" onClick={() => { history.push(`${pathname}/address`) }} >收获地址</Item>
                    <Item arrow="horizontal" onClick={() => { history.push(`${pathname}/purchaseHistory`) }} >购买记录</Item>
                    <Item arrow="horizontal" onClick={() => { history.push(`${pathname}/myQrCode`) }} >二维码推广</Item>
                </List>
                <List renderHeader={() => '医药专员'} className="my-list">
                    <Item arrow="horizontal" onClick={() => { history.push(`${pathname}/order`) }} >销售订单</Item>
                </List>
            </div>
            <Switch>
                <Route path="*/address" component={Address} />
                <Route path="*/myQrCode" component={MyQRCode} />
                <Route path="*/purchaseHistory" component={PurchaseHistory} />
                <Route path="*/order" component={Order} />
            </Switch>
        </>
    )
})